<template>
  <div class="popularList">
    <div class="popularList-item" v-for="(item, index) in product" :key="index" @click="detailById(item.id)">
      <van-image width="70" height="76" :src="item.imgUrl" />
      <div class="popularList-item-head">
        <div class="name">{{ item.name }}</div>
        <div class="weight">1kg,priceg</div>
        <div class="price">$ {{ item.price }}</div>
        <div class="addShopCar" @click="addShopCar(item)">
          <van-icon name="plus" color="#FFF" size="15" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});
const detailById = (id: string) => {
  router.push({
    name: 'ShopDetail',
    query: {
      id: id,
    },
  });
};
const addShopCar = (item: any) => {
  console.log("item",item)
}
</script>
<style scoped lang="less">
.popularList {
  display: flex;
  overflow-x: auto;
  .popularList-item {
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0px 0px 6px 2px #e9e9e9;
    padding: 8px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .popularList-item-head {
      position: relative;
      display: block;
      width: 130px;
      margin-top: 16px;
      color: #6d3805;
      .name {
        font-size: 15px;
        font-weight: bold;
      }
      .weight {
        color:#929292;
        font-size: 12px;
        padding: 2px 0;
      }
      .price {
        color:#FF5E00;
        font-size: 20px;
        padding: 2px 0;
      }
      .addShopCar {
        position: absolute;
        right: 0;
        bottom: 5px;
        width:30px;
        height:30px;
        line-height:30px;
        border-radius: 50%;
        background:#3AA14C;
        text-align:center;
      }
    }
  }
}
</style>
